<template>
  <div class="mvPage">
    <div class="top">
      <h3 class="title">
        {{ this.$route.query.type === 'mv' ? 'MV详情' : '视频详情' }}
      </h3>
      <div class="mv">
        <video :src="videoUrl" controls></video>
      </div>
    </div>
    <div
      class="user"
      v-if="$route.query.type == 'mv' ? videoInfo.cover : videoInfo.coverUrl"
    >
      <div class="avator">
        <img
          :src="
            ($route.query.type == 'mv'
              ? videoInfo.artists[0].img1v1Url
              : videoInfo.avatarUrl) + '?param=100y100'
          "
          alt=""
          @click="goUSerInfo(videoInfo)"
        />
        <div class="name" @click="goUSerInfo(videoInfo)">
          {{
            $route.query.type == 'mv'
              ? videoInfo.artists[0].name
              : videoInfo.creator.nickname
          }}
        </div>
      </div>
      <div class="mvInfo">
        <div class="name">
          {{ $route.query.type == 'mv' ? videoInfo.name : videoInfo.title }}
        </div>
        <div class="info">
          <span
            >发布:
            {{
              $route.query.type == 'mv'
                ? videoInfo.publishTime
                : videoInfo.publishTime | showDate
            }}</span
          >
          <span
            >播放:
            {{
              ($route.query.type == 'mv'
                ? videoInfo.playCount
                : videoInfo.playTime) | handleNum
            }}</span
          >
        </div>
        <div class="btn">
          <button @click="clickLike">
            <i class="el-icon-circle-check" :class="isLike ? 'red' : ''"></i>
            {{ isLike ? '已赞' : '赞' }}
          </button>
          <button @click="clickCollect">
            <i class="el-icon-star-off" :class="isSub ? 'red' : ''"></i>
            {{ isSub ? '已收藏' : '收藏' }}
          </button>
          <button @click="$message.warning('敬请期待!')">
            <i class="el-icon-grape"></i> 分享
          </button>
        </div>
      </div>
    </div>
    <div class="commentBox">
      <div class="title">评论</div>
      <div
        class="connmentBox"
        v-if="comments.comments"
        v-loading="isCommentLoading"
      >
        <!-- 热门评论 -->
        <comment
          v-if="comments.hotComments"
          :commentType="$route.query.type == 'mv' ? 'mv' : 'video'"
          :comments="comments.hotComments"
          :commentId="$route.query.id + ''"
          @getComment="handleGetComment"
          ref="hotComment"
          @handleBacktop="handleBacktop"
          ><p slot="title">精彩评论</p></comment
        >
        <!-- 最新评论 -->
        <comment
          :commentType="$route.query.type == 'mv' ? 'mv' : 'video'"
          :comments="comments.comments"
          :commentId="$route.query.id + ''"
          @getComment="handleGetComment"
          @handleBacktop="handleBacktop"
          :isHotComment="comments.hotComments ? false : true"
          @transToHotComment="
            (info) =>
              this.$refs.hotComment.floorComment(info.commentId, info.nickName)
          "
          ><p slot="title">最新评论</p></comment
        >
        <div class="pagination">
          <el-pagination
            background
            layout="prev,pager,next"
            :total="comments.total"
            :page-size="50"
            :current-page="commentsPage"
            @current-change="commentPageChange"
            hide-on-single-page
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-backtop target=".mvPage"></el-backtop>
  </div>
</template>
<script>
import {
  getSingerMvInfo,
  getMvUrl,
  getMvComment,
  setLikeMv,
  getUserLikeList,
  setCollectVideoMv,
  setCollectMv,
  getVideoDetail,
  getVideoUrl,
  getVideoComment
} from '@/api/discover/singerDetail'
import { handleNum, formatDate } from '@/plugins/utils'
import comment from '@/views/musicDetail/components/comment.vue'
export default {
  data() {
    return {
      // mv视频 详情
      videoInfo: {},
      // mv视频 地址
      videoUrl: '',
      comments: {},
      // 评论页数
      commentsPage: 1,
      // 是否正在加载评论
      isCommentLoading: false,
      // 用户是否喜欢该视频
      isLike: false,
      // 用户是否收藏该视频
      isSub: false
    }
  },
  components: {
    comment
  },
  methods: {
    // 获取mv详情
    async getSingerMvInfo() {
      const res = await getSingerMvInfo({
        mvid: this.$route.query.id
      })
      this.videoInfo = res.data.data
      // console.log(this.videoInfo, '单个mv详情')
    },
    // 获取mv地址
    async getMvUrl() {
      const res = await getMvUrl({
        id: this.$route.query.id
      })
      this.videoUrl = res.data.data.url
    },
    // 请求mv评论数据
    async getMvComment() {
      // 获取时间戳
      var timestamp = Date.parse(new Date())
      this.isCommentLoading = true
      // 清空最新评论数据
      // this.comments.comments = [];

      let res = await getMvComment({
        id: this.$route.query.id,
        offset: 20 * (this.commentsPage - 1),
        timestamp
      })

      //   console.log(res);
      if (res.data.code !== 200) {
        this.$message.error('获取评论失败,请稍后重试!')
        return
      }
      this.comments = res.data
      this.isCommentLoading = false
    },
    //  发布回调
    handleGetComment() {
      console.log('发布')
      if (this.$route.query.type === 'mv') {
        this.getMvComment()
      } else if (this.$route.query.type === 'video') {
        this.getVideoComment()
      }
      // this.getMvComment()
    },
    // 点击评论的评论回到置顶
    handleBacktop() {
      const dom = document.querySelector('.mvPage')
      dom.querySelector('.el-backtop').click()
    },
    // 翻页回调
    commentPageChange(page) {
      console.log(page)
      this.commentsPage = page
      if (this.$route.query.type === 'mv') {
        this.getMvComment()
      } else if (this.$route.query.type === 'video') {
        this.getVideoComment()
      }
      // this.getMvComment()
      this.handleBacktop()
    },
    // 去歌手主页
    goUSerInfo(info) {
      // console.log(info.artists[0].id)
      this.$router.push({
        path: '/index/singerDetail',
        query: { id: info.artists[0].id }
      })
    },
    // 点击喜欢
    async clickLike() {
      this.isLike = !this.isLike
      // 请求喜欢
      var timestamp = Date.parse(new Date())
      let type = this.$route.query.type == 'mv' ? 1 : 5
      // 请求
      const res = await setLikeMv({
        type,
        id: this.$route.query.id,
        t: this.isLike ? 1 : 0,
        timestamp
      })
      console.log(res, 'like')
      // 获取喜欢mv列表
      await this.getLikeMvList()
      // await this.getIsLike()
    },
    // 获取喜欢mv列表
    async getLikeMvList() {
      let timestamp = Date.parse(new Date())
      let res = await getUserLikeList({
        limit: 1000,
        timestamp
      })
      console.log(res, '获取喜欢mv')
      if (res.data.code != 200) {
        this.$message.error('获取用户点赞视频失败,请稍后重试!')
        return
      }
      this.$store.commit('updateLikeVideoList', res.data.data.feeds)
      console.log('请求了用户喜欢的视频列表')
    },
    // 判断用户是否喜欢了该视频
    getIsLike() {
      if (this.$route.query.type == 'mv') {
        this.isLike = this.$store.state.likeVideoList.find(
          (item) => item.mlogBaseData.id == this.$route.query.id
        )
        // console.log(this.isLike)
      } else {
        // 因为请求的喜欢列表中的视频id是mlogid 要获取vid还需要另外单独请求  这里我直接对比标题和时长 若都对的上则认定为是同一个视频
        this.isLike = this.$store.state.likeVideoList.find(
          (item) =>
            item.mlogBaseData.desc == this.videoInfo.description &&
            item.mlogBaseData.dration == this.videoInfo.durationms
        )
      }
    },
    // 点击收藏
    async clickCollect() {
      this.isSub = !this.isSub
      var timestamp = Date.parse(new Date())

      // 请求
      if (this.$route.query.type == 'video') {
        await setCollectVideoMv({
          id: this.$route.query.id,
          t: this.isSub ? 1 : 0
        })
      } else {
        await setCollectMv({
          mvid: this.$route.query.id,
          t: this.isSub ? 1 : 0,
          timestamp
        })
      }
      this.getSubVideoList()
    },
    // 请求用户收藏的视频列表
    async getSubVideoList() {
      let timestamp = Date.parse(new Date())
      let res = await this.$request('/mv/sublist', { limit: 1000, timestamp })
      if (res.data.code != 200) {
        this.$message.error('获取用户收藏视频失败,请稍后重试!')
        return
      }
      this.$store.commit('updateSubVideoList', res.data.data)
      console.log('请求了用户收藏的视频列表')
    },
    // 判断用户是否收藏了该视频
    getIsSub() {
      // console.log(this.isSub)
      this.isSub = this.$store.state.subVideoList.find(
        (item) => item.vid == this.$route.query.id
      )
    },
    // 请求视频详情
    async getVideoDetail() {
      const res = await getVideoDetail({
        id: this.$route.query.id
      })
      // console.log(res, 777)
      this.videoInfo = res.data.data
    },
    // 获取视频播放地址
    async getVideoUrl() {
      let res = await getVideoUrl({
        id: this.$route.query.id
      })
      // console.log(this.$route.query.id);
      console.log(res, 123)
      this.videoUrl = res.data.urls[0].url
    },
    // 获取视频评论
    async getVideoComment() {
      // 获取时间戳
      var timestamp = Date.parse(new Date())
      this.isCommentLoading = true

      // 清空最新评论数据
      // this.comments.comments = [];

      let res = await getVideoComment({
        id: this.$route.query.id,
        offset: 20 * (this.commentsPage - 1),
        timestamp
      })

      this.isCommentLoading = false
      //   console.log(res);
      if (res.data.code !== 200) {
        this.$message.error('获取评论失败,请稍后重试!')
        return
      }
      this.comments = res.data
      this.isCommentLoading = false
    }
  },
  async created() {
    if (this.$route.query.type === 'mv') {
      await this.getSingerMvInfo()
      await this.getMvUrl()
      await this.getMvComment()
    } else if (this.$route.query.type === 'video') {
      await this.getVideoDetail()
      this.getVideoUrl()
      this.getVideoComment()
    }

    // 一进页面判断是否喜欢
    if (this.$store.state.likeVideoList == null) {
      await this.getLikeMvList()
      this.getIsLike() // 添加到喜欢接口没作用，所以判断是否喜欢就一直是不喜欢
    }
    this.getIsLike()

    // 一进页面判断是否喜欢
    if (this.$store.state.subVideoList == null) {
      await this.getSubVideoList()
      this.getIsSub()
    }
    this.getIsSub()
  },
  filters: {
    handleNum,
    showDate(value) {
      // 1、先将时间戳转成Date对象
      const date = new Date(value)

      // 2、将date进行格式化
      return formatDate(date, 'yyyy-MM-dd')
    }
  }
}
</script>
<style lang="scss" scoped>
.mvPage {
  width: 100%;
  height: 83vh;
  overflow-x: hidden;
  margin: 0 auto;
  // background-color: pink;
  .top {
    width: 800px;
    margin: 0 auto;
    .title {
      // margin-left: 100px;
      margin-bottom: 10px;
      padding-top: 5px;
    }
    .mv {
      width: 800px;
      // height: 400px;
      // background-color: skyblue;
      // margin: 0 auto;
      video {
        width: 100%;
        max-height: 400px;
      }
    }
  }
  .user {
    width: 800px;
    margin: 0 auto;
    margin-top: 10px;
    .avator {
      display: flex;
      align-items: center;
      img {
        width: 60px;
        height: 60px;
        background-color: skyblue;
        border-radius: 30px;
        margin-right: 10px;
        cursor: pointer;
      }
      .name {
        cursor: pointer;
      }
    }
    .mvInfo {
      margin-top: 20px;
      .name {
        font-size: 20px;
        font-weight: 700;
      }
      .info {
        margin-top: 10px;
        span {
          font-size: 14px;
          color: #666;
          margin-right: 20px;
        }
      }
      .btn {
        margin-top: 10px;
        // display: flex;
        // align-items: center;
        i {
          font-size: 16px;
          margin-right: 3px;
        }
        button {
          width: 90px;
          height: 30px;
          border: 1px solid #ccc;
          margin-right: 15px;
          border-radius: 15px;
          background-color: #fff;

          cursor: pointer;
          &:hover {
            background-color: #f7f7f7;
          }
        }
      }
    }
  }
  .commentBox {
    width: 800px;
    margin: 0 auto;
    .title {
      font-size: 20px;
      margin-top: 10px;
      color: #000;
    }
  }
}
// 分页
.pagination {
  display: flex;
  justify-content: center;
}
// 点赞按钮
.red {
  color: #ec4141;
}
</style>
